<template>
  <div id="dataScreen" style="width: 100%;">
    <dv-full-screen-container style="background: #F7F7F7;width: 100%">
      <dv-border-box-11 title="CK问卷数据屏" :style="{  display: 'flex'}">
        <div class="container">
          <div class="itme">

            <div class="textColor" style="height: 30% ;margin-bottom: 10px ">
              <dv-scroll-ranking-board :config="config" style="width:95%;height:100%;color: black"/>
            </div>

            <div :style="{'max-height': this.timeLineHeight + 'px' }"
                 style="overflow-y:scroll;height: 40%;width: auto">
              <dv-decoration-2 style="width:100%;height:5px;"/>
              <dv-capsule-chart :config="config" style="width:100%;height:100%;color: black"/>
            </div>

            <div style="height: 35%">
              <dv-decoration-2 style="width:100%;height:5px;"/>
              <GroupChart style="width:100%;height: 100%"></GroupChart>
            </div>

<!--            <div style="float: left">-->
<!--              <dv-water-level-pond :config="config3" style="width:140px;height:140px"/>-->
<!--            </div>-->
<!--            <div style="float: left">-->
<!--              <dv-water-level-pond :config="config3" style="width:140px;height:140px"/>-->
<!--            </div>-->
<!--            <div style="float: left">-->
<!--              <dv-water-level-pond :config="config4" style="width:140px;height:140px;"/>-->
<!--            </div>-->
          </div>
          <div class="itme" :style="{width:'40%',height:'100%'}">
            <!-- 用于设置echarts元素的-->
            <div style="height: 70%">
              <dv-border-box-10 >
                <ChinaMap style="height: 100%;"></ChinaMap>
              </dv-border-box-10>
            </div>
            <div style="height: 35%;margin-top: 3%">
              <div  class="three" style="width: 30%;height: 100%;float: left;margin-right: 10px">
                <dv-border-box-12 :reverse="true"  :style="{  display: 'flex'}">
                  <div  style="margin-top: 50%">问卷名称</div>
                  <div  >喜欢的游戏</div>
                </dv-border-box-12>
              </div>
              <div  class="three" style="width: 30%;height: 100%;float: left;margin-right: 10px">
                <dv-border-box-12 :reverse="true"  :style="{  display: 'flex'}">
                  <div  style="margin-top: 50%">问卷描述</div>
                  <div  >统计对游戏的一些了解</div>
                </dv-border-box-12>
              </div>
              <div  class="three" style="width: 30%;height: 100%;float: left;margin-right: 10px">
                <dv-border-box-12 :reverse="true"  :style="{  display: 'flex'}">
                  <div  style="margin-top: 50%">已答数量</div>
                  <div  >35</div>
                </dv-border-box-12>
              </div>
<!--              <div class="three" style="width: 30%;height: 100%;float: left;margin: 0 4% 0 4%">-->
<!--                <dv-border-box-12 :reverse="true">-->
<!--                  <div  style="margin-top: 50%">问卷描述</div>-->
<!--                  <div  >问卷1</div>-->
<!--                </dv-border-box-12>-->
<!--              </div>-->
<!--              <div style="width: 30%;height: 100%;float: right">-->
<!--                <dv-border-box-12 :reverse="true">-->
<!--                  dv-border-box-8-->
<!--                </dv-border-box-12>-->
<!--              </div>-->
            </div>
          </div>
          <div class="itme" >
            <div>
              <input placeholder="请输入问卷名进行搜索"></input>
            </div>

            <div style="height: 35%;width: auto">
              <line-chart style="width: 100%;height: 100%;"></line-chart>
            </div>

            <div style="height: 35%">
              <dv-decoration-2 style="width:100%;height:5px;"/>
              <PieMap style="width:100%;height: 100%"></PieMap>
            </div>

            <div style="height: 33%">
              <dv-decoration-2 style="width:100%;height:5px;"/>
              <bar-chart style="width:100%;height: 100%"></bar-chart>
            </div>

          </div>
        </div>
      </dv-border-box-11>

    </dv-full-screen-container>
  </div>
</template>
<style>

.dv-water-pond-level svg {
  left: 3.5px;
}
</style>

<script>

import PieMap from "./echartsView/PieMap.vue";
import BarChart from "./echartsView/Barchart.vue";
import LineChart from "./echartsView/LineChart.vue";
import ChinaMap from "./echartsView/ChinaMap.vue";
import GroupChart from "@/views/echartsView/GroupChart";

export default {
  components: {
    //添加模板到组件

    PieMap,
    BarChart,
    LineChart,
    ChinaMap,
    GroupChart
  },
  data() {
    return {
      timeLineHeight: "",
      /*DataV数据*/
      config: {
        data: [
          {
            name: '喜欢的游戏',
            value: 35
          },
          {
            name: '问卷名',
            value: 10
          },
          {
            name: '测试',
            value: 7
          },
          {
            name: '问卷名75342',
            value: 6
          },
          {
            name: '问卷名21312',
            value: 8
          },
          {
            name: '人口普查',
            value: 4
          },
          {
            name: '游戏调研',
            value: 2
          },
          {
            name: '测试问卷',
            value: 5
          },
          {
            name: 'dd',
            value: 2
          },
          {
            name: '66',
            value: 1
          },
          {
            name: '33',
            value: 1
          },

        ],
      },
      config2: {
        number: [100.56],
        toFixed: 2,
        content: '{nt}个'
      },
      config3: {
        data: [100],
        shape: 'round'
      },
      config4: {
        data: [{
          name: '周口',
          value: 55
        }]
      }
    }
  },
  mounted() {
    this.timeLineHeight = document.documentElement.clientHeight - 100;
    window.onresize = () => {
      this.timeLineHeight = document.documentElement.clientHeight - 100;
    };
  },

}

</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: black;
  margin-top: 60px;

}

.itme {
  //margin-top: 75px;
  float: left;
  width: 29%;
  height: 100%;
  padding: 0px 0px 0px 0px;
  margin: 75px 0px 10px 9px;
}

.container {
  color: black;
  height: 82.5%;
  flex-direction: row;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;

}

.three{
  color: black;
  text-align: center;
}

.textColor{
  color: black;
}

</style>
